```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户详情 - 销售管理AI系统</title>
    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            padding: 12px 24px;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
        }
        .timeline-item {
            position: relative;
            padding-left: 30px;
            margin-bottom: 20px;
        }
        .timeline-item:before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .timeline-item:after {
            content: '';
            position: absolute;
            left: 5px;
            top: 20px;
            bottom: -20px;
            width: 2px;
            background: #e2e8f0;
        }
        .timeline-item:last-child:after {
            display: none;
        }
        .nav-tab {
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            border-bottom-color: #4f46e5;
            color: #4f46e5;
        }
        .ai-analysis-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
        }
        .opportunity-card {
            transition: all 0.3s ease;
        }
        .opportunity-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-chart-line text-2xl bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent"></i>
                        <span class="ml-2 text-xl font-bold text-gray-900">销售管理AI</span>
                    </div>
                    <div class="hidden md:ml-6 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">仪表盘</a>
                        <a href="customers.html" class="text-gray-900 border-b-2 border-blue-500 px-3 py-2 text-sm font-medium">客户管理</a>
                        <a href="opportunities.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">销售机会</a>
                        <a href="analytics.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">业绩分析</a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <button class="btn-primary text-white px-4 py-2 text-sm font-medium">
                            <i class="fas fa-plus mr-2"></i>新建客户
                        </button>
                    </div>
                    <div class="ml-3 relative">
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <i class="fas fa-bell text-gray-400 hover:text-gray-600 cursor-pointer"></i>
                                <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">张</div>
                                <span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">张三</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题和操作 -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">客户详情</h1>
                <p class="text-gray-600 mt-2">查看和管理客户详细信息</p>
            </div>
            <div class="flex space-x-3">
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    <i class="fas fa-edit mr-2"></i>编辑信息
                </button>
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    <i class="fas fa-phone mr-2"></i>电话联系
                </button>
                <button class="btn-primary text-white">
                    <i class="fas fa-plus mr-2"></i>新增跟进
                </button>
            </div>
        </div>

        <!-- 标签式导航 -->
        <div class="glass-card p-6 mb-8">
            <div class="flex space-x-8 border-b border-gray-200">
                <button class="nav-tab active pb-3 px-1 text-sm font-medium">基本信息</button>
                <button class="nav-tab pb-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">跟进记录</button>
                <button class="nav-tab pb-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">AI分析</button>
                <button class="nav-tab pb-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">销售机会</button>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧列：客户基本信息 -->
            <div class="lg:col-span-2 space-y-8">
                <!-- 客户基本信息卡片 -->
                <div class="glass-card p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-xl font-semibold text-gray-900">客户基本信息</h2>
                        <span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">高价值客户</span>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="flex items-center mb-4">
                                <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold">腾</div>
                                <div class="ml-4">
                                    <h3 class="text-lg font-semibold text-gray-900">腾讯科技有限公司</h3>
                                    <p class="text-gray-600">互联网/科技行业</p>
                                </div>
                            </div>
                            
                            <div class="space-y-3">
                                <div class="flex items-center text-gray-600">
                                    <i class="fas fa-user mr-3 w-4 text-center"></i>
                                    <span>联系人：马化腾</span>
                                </div>
                                <div class="flex items-center text-gray-600">
                                    <i class="fas fa-phone mr-3 w-4 text-center"></i>
                                    <span>联系电话：13800138000</span>
                                </div>
                                <div class="flex items-center text-gray-600">
                                    <i class="fas fa-envelope mr-3 w-4 text-center"></i>
                                    <span>邮箱：mahuateng@tencent.com</span>
                                </div>
                                <div class="flex items-center text-gray-600">
                                    <i class="fas fa-map-marker-alt mr-3 w-4 text-center"></i>
                                    <span>地址：深圳市南山区科技园</span>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="mb-4">
                                <h4 class="text-sm font-medium text-gray-500 mb-2">客户等级</h4>
                                <div class="flex items-center">
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full" style="width: 85%"></div>
                                    </div>
                                    <span class="ml-2 text-sm font-medium text-gray-700">A级</span>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <h4 class="text-sm font-medium text-gray-500 mb-2">合作意向</h4>
                                <div class="flex items-center">
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-green-500 h-2 rounded-full" style="width: 70%"></div>
                                    </div>
                                    <span class="ml-2 text-sm font-medium text-gray-700">高意向</span>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <h4 class="text-sm font-medium text-gray-500 mb-2">客户标签</h4>
                                <div class="flex flex-wrap gap-2">
                                    <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">VIP客户</span>
                                    <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">长期合作</span>
                                    <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">技术导向</span>
                                    <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">决策链复杂</span>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 mb-2">最后跟进</h4>
                                <p class="text-sm text-gray-700">2024-01-15 产品演示会议</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 跟进记录时间线 -->
                <div class="glass-card p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-xl font-semibold text-gray-900">跟进记录</h2>
                        <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                            <i class="fas fa-plus mr-1"></i>添加记录
                        </button>
                    </div>
                    
                    <div class="space-y-6">
                        <div class="timeline-item">
                            <div class="glass-card p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <span class="text-sm font-medium text-gray-900">产品演示会议</span>
                                    <span class="text-xs text-gray-500">2024-01-15 14:30</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">向客户展示了最新产品功能，客户对AI分析模块表现出浓厚兴趣。</p>
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-user mr-1"></i>
                                    <span>跟进人：张三</span>
                                    <i class="fas fa-tag ml-3 mr-1"></i>
                                    <span>产品演示</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="glass-card p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <span class="text-sm font-medium text-gray-900">需求调研沟通</span>
                                    <span class="text-xs text-gray-500">2024-01-10 10:00</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">深入了解客户业务痛点，收集了具体需求信息。</p>
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-user mr-1"></i>
                                    <span>跟进人：李四</span>
                                    <i class="fas fa-tag ml-3 mr-1"></i>
                                    <span>需求调研</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="glass-card p-4">
                                <div class="flex justify-between items-start mb-2">
                                    <span class="text-sm font-medium text-gray-900">初次接触</span>
                                    <span class="text-xs text-gray-500">2024-01-05 09:15</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">通过行业展会认识，初步介绍了公司产品和服务。</p>
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-user mr-1"></i>
                                    <span>跟进人：王五</span>
                                    <i class="fas fa-tag ml-3 mr-1"></i>
                                    <span>初次接触</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧列：AI分析和相关机会 -->
            <div class="space-y-8">
                <!-- AI分析结果卡片 -->
                <div class="ai-analysis-card p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-xl font-semibold text-white">AI智能分析</h2>
                        <i class="fas fa-robot text-white text-xl"></i>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-white text-sm font-medium">成交概率预测</span>
                                <span class="text-white font-bold">78%</span>
                            </div>
                            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
                                <div class="bg-white h-2 rounded-full" style="width: 78%"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-white text-sm font-medium">客户价值评分</span>
                                <span class="text-white font-bold">92/100</span>
                            </div>
                            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
                                <div class="bg-white h-2 rounded-full" style="width: 92%"></div>
                            </div>
                        </div>
                        
                        <div class="pt-3 border-t border-white border-opacity-20">
                            <h4 class="text-white text-sm font-medium mb-2">AI分析建议</h4>
                            <ul class="text-white text-sm space-y-1">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-2 text-sm"></i>
                                    <span>客户对技术方案接受度高，建议加强技术沟通</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-2 text-sm"></i>
                                    <span>决策周期预计2-3个月，需保持定期跟进</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-2 text-sm"></i>
                                    <span>推荐重点展示AI数据分析功能</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 相关销售机会 -->
                <div class="glass-card p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-xl font-semibold text-gray-900">相关销售机会</h2>
                        <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                            <i class="fas fa-plus mr-1"></i>新建机会
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="opportunity-card glass-card p-4 cursor-pointer">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-medium text-gray-900">企业级AI解决方案</span>
                                <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">进行中</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">为客户定制AI销售预测系统</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-calendar mr-1"></i>
                                    <span>预计成交：2024-03-15</span>
                                </div>
                                <span class="text-sm font-semibold text-blue-600">¥1,200,000</span>
                            </div>
                        </div>
                        
                        <div class="opportunity-card glass-card p-4 cursor-pointer">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-medium text-gray-900">数据分析服务</span>
                                <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已签约</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">季度销售数据分析服务</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-calendar mr-1"></i>
                                    <span>服务期：2024-01-01 至 2024-03-31</span>
                                </div>
                                <span class="text-sm font-semibold text-green-600">¥300,000</span>
                            </div>
                        </div>
                        
                        <div class="opportunity-card glass-card p-4 cursor-pointer">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-medium text-gray-900">技术培训服务</span>
                                <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">待确认</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">AI工具使用培训课程</p>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-calendar mr-1"></i>
                                    <span>待安排</span>
                                </div>
                                <span class="text-sm font-semibold text-gray-600">¥80,000</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="glass-card p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4">快速操作</h2>
                    <div class="grid grid-cols-2 gap-3">
                        <button class="p-3 bg-blue-50 hover:bg-blue-100 rounded-lg text-blue-700 transition-colors">
                            <i class="fas fa-calendar-check block text-lg mb-1"></i>
                            <span class="text-sm">安排会议</span>
                        </button>
                        <button class="p-3 bg-green-50 hover:bg-green-100 rounded-lg text-green-700 transition-colors">
                            <i class="fas fa-file-contract block text-lg mb-1"></i>
                            <span class="text-sm">发送合同</span>
                        </button>
                        <button class="p-3 bg-purple-50 hover:bg-purple-100 rounded-lg text-purple-700 transition-colors">
                            <i class="fas fa-chart-line block text-lg mb-1"></i>
                            <span class="text-sm">生成报告</span>
                        </button>
                        <button class="p-3 bg-orange-50 hover:bg-orange-100 rounded-lg text-orange-700 transition-colors">
                            <i class="fas fa-tasks block text-lg mb-1"></i>
                            <span class="text-sm">添加任务</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签导航切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.nav-tab');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有active类
                    tabs.forEach(t => t.classList.remove('active'));
                    tabs.forEach(t => t.classList.add('text-gray-500', 'hover:text-gray-700'));
                    
                    // 为当前标签添加active类
                    this.classList.add('active');
                    this.classList.remove('text-gray-500', 'hover:text-gray-700');
                });
            });
            
            // 机会卡片点击效果
            const opportunityCards = document.querySelectorAll('.opportunity-card');
            opportunityCards.forEach(card => {
                card.addEventListener('click', function() {
                    alert('跳转到销售机会详情页面');
                });
            });
        });
    </script>
</body>
</html>
```